<!DOCTYPE html>
<!-- 
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 3.1.1
Version: 2.0.2
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<!--[if IE 8]>
<html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<!-- BEGIN HEAD -->
<!-- BEGIN BODY -->
<link rel="stylesheet" href="assets/css/angular-ui-tree.css"/>

<style type="text/css">
    .modal-content .modal-footer button.btn-primary {
        margin-top: 0;
        margin-bottom: 0;
    }

    .row {
        margin: 0;
    }

    .menu {
        color: #338ee7;
        font-weight: bold;
    }

    .leaf {
        margin-left: 38px;
    }

    .no-border {
        border: none;
    }

    .func-btn {
        margin-top: 10px;
        margin-right: 8px;
    }

    /*----------------------------------------*/

    .btn {
        margin-right: 8px;
    }

    .angular-ui-tree-handle {
        background: #f8faff;
        border: 1px solid #dae2ea;
        color: #7c9eb2;
        padding: 10px 10px;
        font-weight: 100;
    }

    .angular-ui-tree-handle:hover {
        color: #438eb9;
        background: #f4f6f7;
        border-color: #dce2e8;
    }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 2px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    tr.angular-ui-tree-empty {
        height: 100px
    }

    .group-title {
        background-color: #687074 !important;
        color: #FFF !important;
    }

    /* --- Tree --- */
    .tree-node {
        border: 1px solid #dae2ea;
        background: #f8faff;
        color: #7c9eb2;
    }

    .nodrop {
        background-color: #f2dede;
    }

    .tree-node-content {
        margin: 7px;
    }

    .tree-handle {
        padding: 10px;
        background: #428bca;
        color: #FFF;
        margin-right: 10px;
    }

    .angular-ui-tree-handle:hover {
    }

    .angular-ui-tree-placeholder {
        background: #f0f9ff;
        border: 2px dashed #bed2db;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }


</style>


<body class="page-header-fixed">
<div>
    <!--    <a class="btn blue" href="javascript:;" data-target="#factoryModel"
           data-toggle="modal" ng-click="addFactory();">
            <i class="fa fa-plus"></i>
            新增
        </a>-->

    <a class="btn blue" href="javascript:;" ng-click="updateUrls()">
        <i class="fa fa-check"></i>
        保存
    </a>
</div>
<div>
    <button class="btn btn-success btn-sm" ng-click="expandAll()">全部展开</button>
    <button class="btn btn-success btn-sm" ng-click="collapseAll()">全部折叠</button>
</div>

<div>

    <div ui-tree="urlTree" data-drag-enabled="true">
        <ul ui-tree-nodes id="tree-root" ng-model="updatedTree" style="list-style:none">
            <li>
                <ul ui-tree-nodes="" ng-model="updatedTree.subTree" style="list-style:none">
                    <li ng-repeat="item in updatedTree.subTree track by item.id" ui-tree-node ng-include="'sysManage/urlManageItem.html'"></li>
                </ul>
            </li>
        </ul>
    </div>
</div>


<div id="nodeModal" class="modal fade" role="dialog" aria-hidden="true" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="w5c-form demo-form" role="form" w5c-form-validate="vm.validateOptions" novalidate name="validateForm">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="validateForm.reset()">×</button>
                    <h4 class="modal-title">Url新增/修改</h4>
                </div>

                <div class="modal-body form">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-3 control-label text-right"><span class="star-color">* </span>Url Id: </label>
                            <span class="col-sm-8 control-label">{{editedNode.id}}</span>
                        </div>
                    </div>
                </div>

                <div class="modal-body form">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-3 control-label text-right"><span class="star-color">* </span>Url名称</label>

                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input type="text" class="form-control" ng-model="editedNode.name" required name="name"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-body form">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-3 control-label text-right"><span class="star-color">* </span>Url地址</label>

                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input type="text" class="form-control" ng-model="editedNode.url" name="name"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-body form">
                    <div class="form-group">
                        <div class="row">
                            <label class="col-sm-3 control-label text-right"><span class="star-color">* </span>图标</label>

                            <div class="col-sm-8">
                                <div class="input-group">
                                    <input type="text" class="form-control" ng-model="editedNode.icon" name="name"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="validateForm.reset()"><i class="fa fa-times"></i>
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" w5c-form-submit="saveItem();">
                        <i class="fa fa-check"></i>
                        保存
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>


</body>
</html>
